<template>
  <div class="handl_box">
    <!-- 头部返回 -->
    <div class="header_box">
      <span @click="goHome">
        <img
          class="imgOne"
          src="~@/assets/duZhongTai/left_icon.png"
          alt=""
          srcset=""
        />
      </span>
      <span class="title"></span>
      <span>
        <!-- <img
          class="imgTwo"
          src="~@/assets/duZhongTai/more.png"
          alt=""
          srcset=""
        /> -->
      </span>
    </div>
    <!-- 图片 -->
    <div class="box_img">
      <img src="../../../assets/homeNew/fuwu_yujing.jpg" alt="" srcset="" />
    </div>
    <!-- 内容 -->
    <div class="box_content">
      <div class="c_box">
        <el-form
          ref="form"
          :rules="ruleForm"
          :model="handlFrom"
          label-width="100px"
        >
          <!-- <div class="b_c">
            <div>问题原因</div>
            <div style="width: 70%">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="handlFrom.questionReason"
                :disabled="falg == 1 ? false : true"
              >
              </el-input>
            </div>
          </div>
          <div class="b_c">
            <div>应急措施</div>
            <div style="width: 70%">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="handlFrom.emergencyMeasures"
                :disabled="falg == 1 ? false : true"
              >
              </el-input>
            </div>
          </div>
          <div class="b_c">
            <div>整改举措</div>
            <div style="width: 70%">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="handlFrom.rectificationMeasures"
                :disabled="falg == 1 ? false : true"
              >
              </el-input>
            </div>
          </div>
          <div class="b_c b_c_last">
            <van-cell
              title="预计完成时间"
              :value="handlFrom.expectedTime"
              @click="handelShow"
            />
            <van-calendar v-model="show" @confirm="onConfirm" />
          </div> -->
          <div class="b_c">
            <div>
              <el-form-item label="问题原因" prop="questionReason">
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请输入内容"
                  v-model="handlFrom.questionReason"
                  :disabled="falg == 1 ? false : true"
                >
                </el-input>
              </el-form-item>
            </div>
          </div>
          <div class="b_c">
            <div>
              <el-form-item label="应急措施" prop="emergencyMeasures">
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请输入内容"
                  v-model="handlFrom.emergencyMeasures"
                  :disabled="falg == 1 ? false : true"
                >
                </el-input>
              </el-form-item>
            </div>
          </div>
          <div class="b_c">
            <div>
              <el-form-item label="整改措施" prop="rectificationMeasures">
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请输入内容"
                  v-model="handlFrom.rectificationMeasures"
                  :disabled="falg == 1 ? false : true"
                >
                </el-input>
              </el-form-item>
            </div>
          </div>
          <div class="b_c b_c_last">
            <van-cell
              title="预计完成时间"
              :value="handlFrom.expectedTime"
              @click="handelShow"
            />
            <van-calendar v-model="show" @confirm="onConfirm" />
          </div>
        </el-form>
      </div>
    </div>
    <div style="height: 100px"></div>
    <!-- 回单按钮 -->
    <div class="handle_sub">
      <el-button
        class="b-button"
        type="primary"
        :disabled="falg == 1 ? false : true"
        @click="handleSub()"
        >回 单</el-button
      >
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Field } from "vant";
import { Form } from "vant";
Vue.use(Form);
Vue.use(Field);
import { Calendar } from "vant";
import { Toast } from "vant";
Vue.use(Calendar);
Vue.use(Toast);
export default {
  data() {
    return {
      handlFrom: {
        questionReason: "", //问题原因
        emergencyMeasures: "", //应急措施
        rectificationMeasures: "", //整改措施
        logId: "",
        expectedTime: "", //预计完成时间
        expectedTimeTwo: "",
      },
      dataList: [], //获取到的数据
      falg: null, //判断是否可以回单
      show: false,
      strString: null,
      ruleForm: {
        // questionReason: [
        //   { required: true, message: "请输入问题原因", trigger: "blur" },
        // ],
      },
    };
  },
  watch: {},
  activated() {},
  created() {
    this.getUrl();
  },
  methods: {
    //获取URL地址
    getUrl() {
      let srt = `http://192.168.2.17:8500/#/handleHtml?logId=1558192`;
      // let srt = window.location.href;
      this.strString = srt;
      var reg = srt.substring(srt.indexOf("?") + 1, srt.length).split("&");
      this.falg = null;
      console.log("reg==", reg);
      reg.forEach((item) => {
        let data = item.split("=");
        let x = data[0];
        console.info("地址栏", x);
        if (x == "logId") {
          this.handlFrom.logId = data[1];
          this.getSelect(this.handlFrom.logId);
        }
      });
      console.log("logId=", this.handlFrom.logId);
    },
    //获取回单返回的数据
    getSelect(logId) {
      this.$http({
        url: this.$http.adornUrl("/CpcpDuSpgl/select"),
        method: "get",
        params: this.$http.adornParams({
          logId: logId,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log("data===", data);
          console.log("data===", data.data);
          if (data.data == false) {
            // console.log("空数组");
            this.falg = 1;
          } else {
            // console.log("不是空数组");
            this.falg = 0;
          }
          console.log("data===", data.data[0]);
          this.dataList = data.data;
          console.log("this.dataList==", this.dataList);
          this.handlFrom = Object.assign(this.handlFrom, data.data[0]);
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    //判断时间控件能不能点开
    handelShow() {
      console.log("falg==", this.falg);
      if (this.falg == 0) {
        this.show = false;
      } else {
        this.show = true;
      }
      // this.show = true;
    },
    //格式换选择的时间
    formatDate(date) {
      console.log("data==", date);
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    },
    //时间控件 确定按钮
    onConfirm(date) {
      this.show = false;
      this.handlFrom.expectedTime = this.formatDate(date);
    },
    onSubmit(values) {
      console.log("submit", values);
    },
    //回单
    handleSub() {
      console.log("-----", this.handlFrom);
      if (
        this.handlFrom.questionReason === "" ||
        this.handlFrom.emergencyMeasures === "" ||
        this.handlFrom.rectificationMeasures === "" ||
        this.handlFrom.expectedTime === ""
      ) {
        Toast.fail("请填写完整信息");
      } else {
        console.log("123");
        // Toast.success("成功");
        // return;
        const {
          questionReason,
          emergencyMeasures,
          rectificationMeasures,
          logId,
          expectedTime,
          expectedTimeTwo,
        } = this.handlFrom;
        this.$http({
          url: this.$http.adornUrl("/CpcpDuSpgl/insert"),
          method: "post",
          data: this.$http.adornData({
            questionReason,
            emergencyMeasures,
            rectificationMeasures,
            logId,
            expectedTime,
            expectedTimeTwo,
          }),
        }).then(({ data }) => {
          if (data && data.code === 0) {
            Toast.success("回单成功");
            setTimeout(() => {
              this.$router.back(-1);
            }, 1500);
          } else {
            Toast.fail(data.msg);
          }
        });
      }
    },
    //返回
    goHome() {
      this.$router.go(-1); // 返回上一页
    },
  },
  mounted() {},
};
</script>

<style scoped>
.handl_box {
  width: 100%;
  height: 100vh;
  /* border: 1px solid red; */
  position: relative;
}
.box_img {
  width: 100%;
}
.box_img img {
  width: 100%;
}
.box_content {
  width: 100%;
  /* height: 80vh; */
  /* border: 1px solid rgb(119, 0, 255); */
  margin-top: 15px;
  display: flex;
  justify-content: center;
}
.c_box {
  width: 93%;
  border-radius: 10px;
  text-align: center;
  border: 1px solid rgb(227, 227, 227);
}
.b_c {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin: 15px 0;
  padding: 0px 5px 10px 10px;
  border-bottom: 1px solid rgb(227, 227, 227);
}
.c_box > div:last-child {
  border-bottom: 1px solid #fff;
}
.c_box .b_c_last {
  border-bottom: 1px solid #fff !important;
  margin-bottom: 0px;
}
.b_c div:first-child {
  color: #000;
  font-weight: bolder;
}
.handle_sub {
  /* width: 100%;
  text-align: center;
  position: fixed;
  bottom: 10px;
  left: auto; */
  bottom: 0px;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  line-height: 3.125rem;
  width: 100%;
  background: #fff;
  text-align: center;
}
.b-button {
  width: 200px;
}
.handl_box /deep/ .el-textarea__inner {
  border: 1px solid #dcdfe6;
  color: #000;
}
.handl_box .van-cell {
  padding: 0px 15px 10px 0px;
  text-align: left;
}
.handl_box .van-cell__value {
  border-bottom: 1px solid #dcdfe6;
  color: #000;
  width: 68%;
  text-align: left;
  padding-left: 10px;
}
.handl_box .van-cell__title,
.van-cell__value {
  -webkit-box-flex: none;
  -webkit-flex: none;
  flex: none;
}
.handl_box .van-cell__title {
  width: 32%;
}
.handl_box .van-cell::after {
  border-bottom: none;
}
.handl_box /deep/ .el-textarea.is-disabled .el-textarea__inner {
  box-shadow: 0px 0px 7px 5px #dcdfe6 !important;
  -webkit-box-shadow: 0px 0px 0px 0px #dcdfe6 !important;
}
.handl_box /deep/ .el-input__inner {
  border: 1px solid #dcdfe6;
  color: #000;
  box-shadow: 0px 0px 7px 5px #dcdfe6 !important;
  -webkit-box-shadow: 0px 0px 0px 0px #dcdfe6 !important;
}
.header_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 2.5rem;
  line-height: 2.5rem;
  border-bottom: 1px solid #e5e5e5;
  padding: 0 10px;
}
.header_box .title {
  font-size: 1.25rem;
}
.header_box .imgOne {
  /* width: 25px; */
  height: 1.5625rem;
}
.header_box .imgTwo {
  width: 40px;
  /* height: 25px; */
}
.handl_box /deep/ .el-form-item__label {
  color: #000 !important;
}
.handl_box /deep/ .van-field__label {
  color: #000;
  text-align: right;
  font-weight: bolder;
}
.handl_box /deep/ .van-field__value {
  border: 1px solid gainsboro;
}
.handl_box /deep/ .van-field__control {
  padding: 5px;
}
</style>